import { Table, Space, Modal, Button, message, List, Divider } from 'antd';
import { any } from 'prop-types';
import React, { useState } from 'react';
import request from '@/http';

const Dialog = (courseId: any) => {
  const [visible, setVisible] = React.useState(false);
  const [score, setScore] = useState([]);
  const [confirmLoading, setConfirmLoading] = React.useState(false);
  // const [score,setScore] = useState([]);
  const [loading, setLoading] = useState(false);
  const showModal = () => {
    setLoading(true);
    if (courseId.rank == '未评分') {
      message.warning('该小组还没有打分，无法查看排名');
      handleCancel();
    } else {
      request
        .get('/api/student/queryTeamRank?couId=' + courseId.courseId)
        .then((couId: any) => {
          if (couId.success) {
            setScore(couId.data);
            console.log(couId.data);
          }
        });
    }
    setLoading(false);
    setVisible(true);
  };

  const handleOk = () => {
    setConfirmLoading(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <>
      <Button type="link" onClick={showModal}>
        查看
      </Button>
      <Modal
        title="小组排行榜"
        visible={visible}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <List
          // bordered
          dataSource={score}
          loading={loading}
          renderItem={(item: any) => {
            if (item.rowno < 3) {
              return (
                <List.Item>
                  <span
                    style={{
                      display: 'block',
                      width: '25px',
                      height: '25px',
                      margin: 'auto 0',
                      borderRadius: '100%',
                      textAlign: 'center',
                      backgroundColor: '#333',
                      color: '#fff',
                      lineHeight: '23px',
                    }}
                  >
                    {item.rowno}
                  </span>
                  <span>{item.teamName}</span>
                  <span>{item.score ? item.score : '暂未分数'}</span>
                </List.Item>
              );
            } else {
              return <List.Item>{item.rowno}</List.Item>;
            }
          }}
        />
      </Modal>
    </>
  );
};

const columns = [
  {
    title: '项目名称',
    dataIndex: 'courseName',
  },
  {
    title: '小组名称',
    dataIndex: 'teamName',
  },
  {
    title: '个人得分',
    dataIndex: 'stuScore',
  },
  {
    title: '小组得分',
    dataIndex: 'teamScore',
  },
  {
    title: '小组排名',
    dataIndex: 'rank',
  },
  {
    title: '小组排行榜',
    render: (text: any, record: any) => {
      if (record.rank == '未评分') {
        return;
      } else {
        return (
          <Space size="middle">
            <Dialog courseId={record.courseId} rank={record.rank} />
          </Space>
        );
      }
    },
  },
];

export default () => {
  const [dataSource, setDataSource] = useState([]);
  const [loading, setLoading] = useState(true);
  const loadDataSource2 = async () => {
    const result2: any = await request.get('/api/student/queryTeamScoreForCou');
    if (result2.success) {
      const data = result2.data.map((student: any) => ({
        courseId: student.courseId,
        courseName: student.courseName,
        rank: student.rank ? student.rank : '未评分',
        stuScore: student.stuScore,
        teamName: student.teamName,
        teamScore: student.teamScore,
      }));
      setDataSource(data);
      setLoading(false);
    }
  };
  React.useEffect(() => {
    loadDataSource2().finally();
  }, []);
  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      pagination={false}
      loading={loading}
      size="middle"
    />
  );
};
